<template>
  <p-card :bordered="false" class="containent">
    <!-- 查询区域 -->
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper wrap1">
      <!-- 头部条码扫描 -->
      <p-row type="flex" :gutter="24">
        <p-col flex="auto">
          <p-form-model layout="inline" :model="topForm" :rules="rules">
            <p-row :gutter="24">
              <p-col :xl="8" :md="12">
                <p-form-model-item label="条码扫描">
                  <p-input
                    placeholder="请扫描"
                    @pressEnter="afterScan"
                  ></p-input>
                </p-form-model-item>
              </p-col>
              <p-col :xl="8" :md="12">
                <p-form-model-item label="线体">
                  <p-select
                    v-model="topForm.lineno"
                    @change="changeLine"
                    allowClear
                  >
                    <p-select-option
                      v-for="item in lines"
                      :key="item.codeValue"
                      :value="item.codeValue"
                      >{{ item.textValue }}</p-select-option
                    >
                  </p-select>
                </p-form-model-item>
              </p-col>
              <p-col :xl="8" :md="12">
                <p-form-model-item label="工站">
                  <p-tree-select
                    v-model="topForm.stationCode"
                    :tree-data="stations"
                    :dropdown-style="{ maxHeight: '500px' }"
                    tree-node-filter-prop="title"
                    show-search
                    allow-clear
                    tree-default-expand-all
                    @change="changeHandler"
                  />
                </p-form-model-item>
              </p-col>
            </p-row>
          </p-form-model>
        </p-col>
        <p-col style="padding-top: 2px">
          <p-button type="primary" @click="setConfigVisible">配置项</p-button>
          <p-button class="ml10" type="primary" @click="resetScanResults"
            >重新扫描</p-button
          >
          <p-button type="primary" class="ml10">工序报工</p-button>
          <p-button type="primary" class="ml10">工序周转</p-button>
          <p-button type="primary" class="ml10">容器拆分</p-button>
        </p-col>
      </p-row>
      <!-- 扫码信息 -->
      <div class="product-execu-title">
        <config-step
          :current="currentStep"
          ref="configStep"
          :type="scanType"
          class="float-right"
          style="width: auto; min-width: 50%"
          size="small"
          @success="setScanOrders"
          :station-code="topForm.stationCode"
        />
        扫码信息
      </div>
      <p-form-model
        layout="inline"
        ref="ruleForm"
        :rules="rules"
        :model="formScan"
      >
        <p-row :gutter="24">
          <p-col :md="8">
            <p-form-model-item label="容器条码(转出)" prop="SNout">
              <p-input
                placeholder=""
                v-model.trim="formScan.SNout"
                read-only
              ></p-input>
            </p-form-model-item>
          </p-col>
          <p-col :md="8">
            <p-form-model-item label="容器条码(接收)" prop="SNrec">
              <p-input
                placeholder=""
                v-model.trim="formScan.SNrec"
                read-only
              ></p-input>
            </p-form-model-item>
          </p-col>
          <p-col :md="8">
            <p-form-model-item label="地址码" prop="Address">
              <p-input
                placeholder=""
                v-model="formScan.Address"
                read-only
              ></p-input>
            </p-form-model-item>
          </p-col>
        </p-row>
      </p-form-model>
      <p-tabs v-model="tab">
        <template slot="tabBarExtraContent">
          <p-button
            v-show="tab === 'current'"
            type="primary"
            @click="containerOut"
            >转入</p-button
          >
        </template>
        <p-tab-pane key="current" tab="当前容器清单">
          <p-table
            size="middle"
            bordered
            rowKey="id"
            :pagination="false"
            :columns="columns"
            :dataSource="dataSource"
            :rowSelection="{
              fixed: true,
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
            }"
          >
            <template slot="spilt" slot-scope="text, record">
              <p-input-number
                v-model="record.num"
                :max="record.pnsnQty"
                :min="1"
                size="small"
                style="width: 50px"
              />
            </template>
          </p-table>
        </p-tab-pane>
        <p-tab-pane key="receive" tab="接收容器清单">
          <p-table
            size="middle"
            bordered
            rowKey="id"
            :columns="columns1"
            :dataSource="bindrecordData"
            :pagination="false"
          />
        </p-tab-pane>
      </p-tabs>
    </div>
    <config
      ref="view"
      :type="scanType"
      v-model="configVisible"
      @success="onScanConfigSuccess"
      :station-code="topForm.stationCode"
    ></config>
  </p-card>
</template>

<script>
import { api } from "@/api/manage";
import { filterObj, timestampToDatetime } from "@/utils/util";
import { postAction, getAction, deleteAction } from "@/api/manage";
import mixins from "./modules/line-station";
import configMixins from "./modules/configMixins";
//当前容器清单表格
const columns = [
  {
    title: "序号",
    dataIndex: "",
    key: "rowIndex",
    width: 60,
    align: "center",
    customRender: function (t, r, index) {
      return parseInt(index) + 1;
    },
  },
  {
    title: "线体 ",
    align: "center",
    dataIndex: "lineName",
  },
  {
    title: "地址码",
    align: "center",
    dataIndex: "addressCode",
  },
  {
    title: "工序工单",
    align: "center",
    dataIndex: "processBillNo",
  },
  {
    title: "产品编码",
    align: "center",
    dataIndex: "productCode",
  },
  {
    title: "产品名称",
    align: "center",
    dataIndex: "productName",
  },
  {
    title: "PN/SN",
    align: "center",
    dataIndex: "pnsn",
  },
  {
    title: "组件编码",
    align: "center",
    dataIndex: "productLine",
  },
  {
    title: "数量",
    align: "center",
    dataIndex: "pnsnQty",
  },
  {
    title: "拆分数量",
    align: "center",
    dataIndex: "num",
    scopedSlots: { customRender: "spilt" },
  },
];
//接收容器清单
const Binding_record = [
  {
    title: "序号",
    dataIndex: "",
    key: "rowIndex",
    width: 60,
    align: "center",
    customRender: function (t, r, index) {
      return parseInt(index) + 1;
    },
  },
  {
    title: "线体",
    align: "center",
    dataIndex: "lineName",
  },
  {
    title: "地址码",
    align: "center",
    dataIndex: "addressCode",
  },
  {
    title: "工序工单",
    align: "center",
    dataIndex: "processBillNo",
  },
  {
    title: "产品编码",
    align: "center",
    dataIndex: "productCode",
  },
  {
    title: "产品名称",
    align: "center",
    dataIndex: "productName",
  },
  {
    title: "PN/SN",
    align: "center",
    dataIndex: "pnsn",
  },
  {
    title: "组件编码",
    align: "center",
    dataIndex: "componentCode",
  },
  {
    title: "接收数量",
    align: "center",
    dataIndex: "pnsnQty",
  },
];
export default {
  name: "Processcode",
  mixins: [mixins, configMixins],
  components: {},
  data() {
    return {
      url: {
        list: "/mes-craft/craft/mesPeProcessRoute/list",
        delete: "/mes-craft/craft/mesPeProcessRoute/delete",
        deleteBatch: "/mes-craft/craft/mesPeProcessRoute/deleteBatch",
        exportXlsUrl: "/mes-code/mesBcTemplate/export",
        // importExcelUrl: '/mes-code/auto/mesBcTemplate/importExcel',
        getColumns: "/mes-code/online/cgform/api/getColumns/",
        buttonAction: "/mes-code/online/cgform/api/doButton",
        containerInfo:
          "/mes-manufacture/mfContainer/getContainerInfoByContainer", //获取容器相关信息
        containerOut: "/mes-manufacture/mfContainer/ContainerBindTrade", //转入
      },
      columns: [], //采集记录表格
      columns1: [], //右下角表
      dataSource: [],
      bindrecordData: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      selectedRowKeys: [], //选中的key
      selectionRows: [], //选中的record
      formScan: {},
      newContainer: {}, //新容器
      oldContainer: {}, //旧容器
      loading: false,
      rules: {
        SNout: [{ required: true, message: "请先扫描容器", trigger: "blur" }],
        SNrec: [{ required: true, message: "请先扫描容器", trigger: "blur" }],
        Address: [{ required: true, message: "请选择地址码", trigger: "blur" }],
      },
      msg: "提醒",
      tab: "current",
      scanType: "containerSplit",
    };
  },
  computed: {},
  created() {
    this.columns = columns;
    this.columns1 = Binding_record;
  },
  methods: {
    afterScan(event) {
      this.addScanResults(event);
      const len = this.scanResults.length;
      const code = this.scanResults[len - 1];
      const item = this.scanOrders[len - 1];
      switch (item.scanType) {
        case 6:
          this.formScan.Address = code;
          break;
        case 7:
          this.formScan.SNout = code;
          this.getContainerInfo("1");
          break;
        case 8:
          this.formScan.SNrec = code;
          this.getContainerInfo("2");
          break;
      }
    },
    // 多选框
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
      console.log(this.selectedRowKeys, this.selectionRows);
    },
    customResetScanResults() {
      this.formScan = {};
      this.dataSource = [];
      this.bindrecordData = [];
    },
    //过滤参数
    filterArg(arr) {
      let list = [];
      arr.map((item) => {
        let obj = {};
        obj.pnsn = item.pnsn;
        obj.pnsnQty = item.pnsnQty;
        obj.wipId = item.wipId;
        list.push(obj);
      });
      return list;
    },
    //获得容器信息
    getContainerInfo(type, who, refresh) {
      this.loading = true;
      let params = {
        containerCode: type,
      };
      postAction(this.url.containerInfo, params)
        .then((res) => {
          if (!res.success) {
            if (who == "1") {
              this.dataSource = [];
            } else {
              this.bindrecordData = [];
              this.newContainer = {};
            }
            this.$message.warning(res.msg);
          }
          if (res.data) {
            if (who == "1") {
              this.oldContainer = res.data;
              this.dataSource = res.data.childrens;
              this.dataSource.map((item) => {
                this.$set(item, "componentCode", res.data.componentCode);
                this.$set(item, "addressCode", res.data.addressCode);
                this.$set(item, "num", 1);
              });
              if (!refresh) {
                this.$message.success("扫描成功");
              }
            } else {
              this.newContainer = res.data;
              this.bindrecordData = res.data.childrens;
              this.bindrecordData.map((item) => {
                this.$set(item, "componentCode", res.data.componentCode);
                this.$set(item, "addressCode", res.data.addressCode);
              });
              if (!refresh) {
                this.$message.success("扫描成功");
              }
            }
          }
        })
        .finally(() => {
          this.loading = false;
        });
    }, //容器转出
    containerOut() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.formScan.SNout === this.formScan.SNrec)
            return this.$message.warning("容器不能相同");
          let changenum = 0;
          let childrens = this.selectionRows.map((item) => {
            let { pnsn, num: pnsnQty, wipId, id } = item;
            changenum += item.num;
            return { pnsn, pnsnQty, wipId, id };
          });
          if (!this.selectedRowKeys || this.selectedRowKeys.length == 0) {
            this.$message.warning("请先选中一条记录");
            return false;
          }
          let params = {
            addressCode: this.formScan.Address,
            childrens,
            lineCode: this.topForm.lineno,
            lineName: this.topForm.lineName,
            newContainerCode: this.formScan.SNrec,
            newContainerId: this.newContainer.containerId,
            newContainerQty: this.newContainer.containerQty,
            newContainerType: 0,
            newContainerUseQty: this.newContainer.useQty,
            oldContainerCode: this.formScan.SNout,
            oldContainerId: this.oldContainer.containerId,
            oldContainerUseQty: this.oldContainer.useQty,
            stationCode: this.topForm.stationCode,
            stationName: this.topForm.stationName,
          };
          postAction(this.url.containerOut, params).then((res) => {
            if (res.success) {
              this.$message.success("转入成功");
              // this.msg = "转入成功";
              // this.msgType = "success";
              this.getContainerInfo(this.formScan.SNout, 1, "refresh");
              this.getContainerInfo(this.formScan.SNrec, 2, "refresh");
              this.selectedRowKeys = [];
            }
          });
        }
      });
    },
  },
};
</script>
